<template>
  <div v-loading="iswraploading" class="prossececontainer">
    <div class="selectHeader">
      <div class="select-wrapper">
        <div class="selectBox">
          <div class="selectTitle">
            <i class="iconfont icon-sousuo" />按条件查询
          </div>
          <div style="display: flex; align-items: center; margin-top: 10px">
            <el-input
              v-model="listquery.nickName"
              clearable
              placeholder="编制单位名称"
              style="width: 200px; margin-right: 10px"
            ></el-input>

            <el-input
              v-model="listquery.key"
              clearable
              placeholder="乡镇名称"
              style="width: 200px; margin-right: 10px"
            ></el-input>

            <el-select
              v-model="listquery.completionYear"
              clearable
              placeholder="任务年度"
              style="width: 200px; margin-right: 10px"
            >
              <el-option
                v-for="(item, index) in years"
                :label="item"
                :value="item"
                :key="index"
              >
              </el-option>
            </el-select>
            <el-button type="success" icon="el-icon-search" @click="search"
              >搜索</el-button
            >
            <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </div>
          <div style="margin-top: 10px">
            <span style="color: #4778c7">阶段进度选择：</span>

            <el-radio-group
              v-model="listquery.progressName"
              size="small"
              @change="valueChange"
            >
              <el-radio-button label="" border>全部</el-radio-button>
              <el-radio-button label="准备工作" border
                >准备工作</el-radio-button
              >
              <el-radio-button label="基础调查" border
                >基础调查</el-radio-button
              >
              <el-radio-button label="编制方案" border
                >编制方案</el-radio-button
              >
              <el-radio-button label="咨询论证" border
                >咨询论证</el-radio-button
              >
              <el-radio-button label="审查审核" border
                >审查审核</el-radio-button
              >
              <el-radio-button label="审批公告" border
                >审批公告</el-radio-button
              >
            </el-radio-group>
          </div>

          <div style="margin-top: 10px">
            <span style="color: #4778c7">审核状态:</span>
            <el-radio-group
              size="small"
              v-model="listquery.isRefuse"
              @change="valueChange"
            >
              <el-radio-button border :label="true">待审核</el-radio-button>
              <el-radio-button border :label="false">已审核</el-radio-button>
            </el-radio-group>
          </div>

          <div class="row-area" style="margin-top: 10px">
            <span style="color: #4778c7">行政区域选择：</span>
            <el-select
              placeholder="所属市选择"
              v-model="currentLiindex"
              @change="cityChange"
              v-if="iscityshow"
              clearable
              @clear="cityclear"
            >
              <el-option
                v-for="(item, index) in citylist"
                :key="item.id"
                :label="item.label"
                :value="index"
              />
            </el-select>
            <ul class="countryArea" v-if="areaShow">
              <li
                v-for="(item, i) in cityChildren"
                :key="i"
                @click="liChange(i)"
                :class="{ areaActive: i == currentareaindex }"
              >
                {{ item.label }}
              </li>
            </ul>
            <el-select
              placeholder="乡镇选择"
              v-model="town"
              @change="townChange"
              v-if="istownshow"
              clearable
            >
              <el-option
                v-for="item in townlist"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <div v-loading="isloading">
      <div class="header">
        <div><i class="el-icon-d-arrow-right"></i>进度信息列表</div>
      </div>
      <div class="totalmessage">
        <span v-if="this.listquery.city != ''">{{ this.listquery.city }}</span
        ><span v-if="this.listquery.country != ''">{{
          this.listquery.country
        }}</span
        >共有<span>{{ total }}</span
        >个乡镇待审核
      </div>
      <el-table
        v-if="tableShow"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :default-expand-all="isExpand"
        @expand-change="expand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="序号" width="100" prop="id">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="town" label="乡镇名" width="150" />

        <el-table-column label="所属行政区划" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.city }}-{{ scope.row.country }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核"
          width="250"
          v-if="listquery.isRefuse == true"
          :key="0"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="buttonDisable[scope.row.id]"
              type="success"
              icon="el-icon-check"
              size="mini"
              @click="examineSuccess(scope.row)"
              >通过</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-close"
              size="mini"
              @click="Refuse(scope.row.id)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="250"
          v-if="listquery.isRefuse == false"
          :key="1"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.rMessage[0].message != undefined">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.rMessage[0].message"
                placement="top"
              >
                <el-tag type="danger" v-if="scope.row.rMessage[0].cok == 1"
                  >市州拒绝</el-tag
                >
                <el-tag type="danger" v-if="scope.row.rMessage[0].cok == 0"
                  >区县拒绝</el-tag
                >
              </el-tooltip>
            </div>
            <div v-else>
              <el-tag type="succese">已通过</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="阶段完成进度">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div @click="openstate(scope.row.progressList[item])">
                <el-progress
                  :percentage="scope.row.progressList[item] ? 100 : 0"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="nickName" label="编制单位" width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.nickName.length > 0" class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.nickName"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
            <span v-else>暂未被编制</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactNamePhone"
          label="联系人+电话"
          width="250"
        >
          <template slot-scope="scope">
            <div class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.contactNamePhone"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="completionYear" label="任务年度" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.completionYear">{{
              scope.row.completionYear
            }}</span>
            <span v-else>暂无限制</span>
          </template>
        </el-table-column>
      </el-table>

      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :fileList="fileList"
        :title="title"
      ></right-div>

      <el-dialog
        title="请给出审核不通过理由，以便编制单位更正"
        :visible.sync="examineVisible"
        width="550px"
        :append-to-body="true"
      >
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入"
          v-model="examineMessage"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isWriteVisible = false">取 消</el-button>
          <el-button type="primary" @click="examineRefuse">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="请选择是否入库填报"
        :visible.sync="isWriteVisible"
        width="550px"
        :append-to-body="true"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="150px"
          label-position="left"
        >
          <el-form-item label="行政区划选择:" prop="villageIds">
            <el-cascader
              style="width: 300px"
              v-model="form.villageIds"
              :options="citylist"
              :props="props"
              size="medium"
              placeholder="请选择行政区划"
              clearable
              collapse-tags
              :show-all-levels="false"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否入库填报:" prop="inputState">
            <el-radio v-model="form.inputState" label="true">是</el-radio>
            <el-radio v-model="form.inputState" label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="入库时间:" prop="inputDate">
            <el-date-picker
              v-model="form.inputDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 300px"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isWriteVisible = false">取 消</el-button>
          <el-button type="primary" @click="isStorageWrite('form')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<script>
import tableHeader from "./components/TableHeader";
import { handleCofirm } from "@/utils/confirm";
import {
  reviewedprogresslist,
  reviewedexamine,
  setexaminemessage,
} from "@/api/town.js";

import rightDiv from "@/views/unitIndex/components/czrightDiv";
import queryMixin from "@/mixins/countquery1.js";
import { mapGetters } from "vuex";
export default {
  components: {
    tableHeader,
    rightDiv,
  },

  mixins: [queryMixin],

  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        completionYear: "",
        city: "",
        country: "",
        town: "",
        village: "",
        progressName: "",
        subProgressTitle: "",
        isReviewed: true,
        isMerge: false,
        isRefuse: true,
      },
      rateArr: [
        "组织准备",
        "技术准备",
        "基础调研",
        "编制方案",
        "咨询论证",
        "审查审议",
        "规划公示",
        "成果审批",
        "规划公告",
      ],
      isExpand: false,
      examineVisible: false,
      examineMessage: "",
      rightnowid: "",
      form: {
        villageIds: [],
        inputState: false,
        inputDate: null,
      },
      rules: {
        villageIds: [
          { required: true, message: "请选择区域", trigger: "blur" },
        ],
        inputState: [
          { required: true, message: "请选择是否入库", trigger: "blur" },
        ],
        inputDate: [
          { required: true, message: "请选择入库时间", trigger: "blur" },
        ],
      },
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true,
      },
      isWriteVisible: false,
      years: ["2021", "2022", "2023", "已完成"],
      isDialogShow: false,
      isloading: false,
      total: 0,
      title: "",
      warningid: "",
      textareavalue: "",
      valueData: "",
      rightPanelShow: false,
      iswraploading: false,
      nowuserarea: "",
      resultList: [],
      fileList: [],
      //行政区划选择
      role: "",
      filterShow: true,
      form: {},
      tableData: [],
      tableShow: true,
      buttonDisable: {},
      AAA: {},
    };
  },
  mounted() {
    this.AAA = new Map();
    this.role = this.$store.getters.user.roles[0].name;
    this.nowuserarea = this.$store.getters.user.area;
    let v = false;
    this.getdata();
  },
  methods: {
    search() {
      this.listquery.currentPage = 1;
      this.listquery.pageSize = 10;
      this.getdata();
    },
    reset() {
      this.listquery = {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        completionYear: "",
        village: "",
        isReviewed: true,
        isMerge: false,
      };
    },
    handleChange() {},
    //合并编制类 树
    expand(data, row) {
      data.state = row;
      this.AAA.set(data.id, row);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 2) {
        if (row.children && row.state) {
          return {
            rowspan: row.children.length + 1,
            colspan: 1,
          };
        } else if (row.isChildren) {
          return {
            rowspan: 1,
            colspan: 0,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },

    //通过审核
    examineSuccess(row) {
      handleCofirm("确认要通过吗？", "warning").then((res) => {
        this.tableShow = false;
        this.$nextTick((e) => {
          this.buttonDisable[row.id] = true;
          this.tableShow = true;
        });
        reviewedexamine(row.id)
          .then((v) => {
            this.getdata();
            this.$notify({
              title: "成功",
              message: "审核通过",
              type: "success",
            });
            this.isDialogShow = false;
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      });
    },
    //拒绝
    Refuse(id) {
      this.examineVisible = true;
      this.rightnowid = id;
    },
    examineRefuse() {
      if (this.examineMessage == "") {
        this.$notify.error({
          title: "警告",
          message: "请填写理由",
        });
      } else {
        let query = {
          id: this.rightnowid,
          message: this.examineMessage,
        };

        setexaminemessage(query).then((v) => {
          this.getdata();
          this.$notify({
            title: "成功",
            message: "完成",
            type: "success",
          });
          this.examineVisible = false;
        });
      }
    },

    query(id) {
      this.$router.push("/stage/stageCount");
    },

    openstate(data) {
      this.title = data.name;
      this.rightPanelShow = true;
      this.resultList = [];

      let fileList = data.files;
      fileList.forEach((element) => {
        let label = element.substring(element.lastIndexOf("/") + 1);
        let obj = {
          label: label,
          url: element,
        };
        this.resultList.push(obj);
      });
    },

    closeRightPane() {
      this.rightPanelShow = false;
    },

    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      this.isloading = true;
      this.listquery.type = "qxsh";
      let res = await reviewedprogresslist(this.listquery);

      this.tableData = res.data.content;
      this.tableData.forEach((d) => {
        d["isdo"] = true;
        if (d.children) {
          d.state = this.isExpand;
        }
      });
      this.total = res.data.totalElements;
      this.tableData.forEach((element) => {
        if (element.children) {
          if (this.AAA.has(element.id)) {
            element.state = this.AAA.get(element.id);
          } else {
            element.state = this.isExpand;
          }
        }
      });
      this.AAA = new Map();

      this.isloading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../public/css/table.scss";
// @import "../../../../public/css/countheader.scss";

.totalmessage {
  padding: 10px 0px;
  margin-right: 20px;
  border-top: 1px dashed #ccc;
  font-size: 24px;
  color: #4778c7;
}
.onemapul li {
  float: left;
  border: 1px solid #4778c7;
  padding: 1px 19px;
  margin-right: 3px;
}
.onemapul .activeli {
  background-color: #4778c7;
  color: #fff;
  font-weight: 700;
}
::v-deep .el-progress-bar__outer {
  height: 15px !important;
}
::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}
.rightbutton {
  display: flex;
}
.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .el-progress {
    width: 130px;
  }
  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}
.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}
.noclick {
  pointer-events: none !important;
}
.zhuanhang {
  display: flex;
  justify-content: center;
  align-items: center;
}
.prossececontainer {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}
.row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 35px;
  margin-right: 5px;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #4778c7;
  i {
    color: #4778c7;
  }
}
.icondiv {
  display: flex;
  justify-content: center;
  span {
    //  background-color: #f2f2f2;
    display: inline-block;
    padding: 5px 5px;
    margin: 0 auto;
    font-size: 12px;
    color: #4778c7;
  }
}

.label-title {
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  vertical-align: middle;
  padding: 0 12px 0 0;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: 700;
}
.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }
  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}
.jieduanul {
  list-style: none;
  margin: 0;
  padding: 5px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  li {
    float: left;
    margin-right: 35px;
    height: 30px;
    font-size: 10px;
    border-radius: 3px;
    padding: 5px 25px;
    background-color: #fff;
    border: 1px solid #4778c7;
    cursor: pointer;
  }
  .active {
    background-color: #4778c7;
    color: #fff;
  }
  .noclick {
    pointer-events: none;
  }
}
::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}
.warn {
  background-color: #cd5555;
  cursor: pointer;
}
// ::v-deep .lastaaa .el-input__inner {
//   height: 32px;
//   width: 45%;
// }
::v-deep .el-table {
  position: relative;
}
</style>
